<template>
  <div>
    <ggou v-for="(obj,index) in arr" :key="index" @ai='fn' :name='obj.dogName' :url='obj.dogImgUrl'></ggou>
    <p>
      显示喜欢的狗
    </p>
    <ul>
      <li v-for="(item,index) in aiArr" :key="index">{{item}}</li>
    </ul>
  </div>
</template>

<script>
  import ggou from './components/dog4'
  export default {
    components: {
      ggou
    },
    data() {
      return {
        arr: [{
            dogImgUrl: "https://scpic.chinaz.net/files/pic/pic9/202003/zzpic23514.jpg",
            dogName: "博美",
          },
          {
            dogImgUrl: "https://scpic.chinaz.net/files/pic/pic9/202003/zzpic23514.jpg",
            dogName: "泰迪",
          },
          {
            dogImgUrl: "https://scpic.chinaz.net/files/pic/pic9/202003/zzpic23514.jpg",
            dogName: "金毛",
          },
          {
            dogImgUrl: "https://scpic.chinaz.net/files/pic/pic9/202003/zzpic23514.jpg",
            dogName: "哈士奇",
          },
          {
            dogImgUrl: "https://scpic.chinaz.net/files/pic/pic9/202003/zzpic23514.jpg",
            dogName: "阿拉斯加",
          },
          {
            dogImgUrl: "https://scpic.chinaz.net/files/pic/pic9/202003/zzpic23514.jpg",
            dogName: "萨摩耶",
          },
        ],
        aiArr: []
      }
    },
    methods: {
      fn(name) {
        this.aiArr.push(name)
      }
    }
  }
</script>

<style>

</style>